<template>
  <div class="content" :class="{ 'is-mobile': isMobile }" v-loading="submitting">
    <heads :current="1"></heads>
    <div class="main" v-show="!showPassengerForm">
      <div class="order-container">
        <!-- Product Details Section -->
        <div class="product-section">
          <h1 class="product-title">{{ product.name }}</h1>
          <div class="product-gallery">
            <el-carousel :height="isMobile ? '250px' : '400px'" :autoplay="false" :loop="false">
              <el-carousel-item v-for="(image, index) in product.imageList" :key="index">
                <el-image fit="contain" :preview-src-list="product.imageList" :src="image" :alt="product.name" class="carousel-image" />
              </el-carousel-item>
            </el-carousel>
<!--            <div class="thumbnail-row" v-if="!isMobile">-->
<!--              <div v-for="(image, index) in product.imageList"-->
<!--                   :key="index"-->
<!--                   class="thumbnail"-->
<!--                   @click="currentIndex = index">-->
<!--                <img :src="image" :alt="product.name">-->
<!--              </div>-->
<!--            </div>-->
          </div>
          <div class="product-info">
            <div class="price" style="color: #0F7CD0;font-weight: bold">{{ $t('order.price') }}：${{ product.price }}</div>
            <div class="details">
              <div class="detail-item">
                <span class="label">{{ $t('order.duration') }}:</span>
                <span>{{ product.duration }}</span>
              </div>
              <div class="detail-item">
                <span class="label">{{ $t('order.location') }}:</span>
                <span>{{ product.location }}</span>
              </div>
              <div class="detail-item">
                <span class="label">{{ $t('order.productCode') }}:</span>
                <span>{{ product.code }}</span>
              </div>
            </div>
            <div v-html="product.content"></div>
          </div>
        </div>

        <!-- Booking Form Section -->
        <div class="booking-section">
          <div class="booking-form">
            <h2 class="form-title">{{ $t('order.startBooking') }}</h2>

            <!-- Passenger Selection -->
            <div class="passenger-section">
              <h3>{{ $t('order.passengerTitle') }} <span class="required">{{ $t('common.required') }}</span></h3>
              <div class="passenger-type" v-for="type in passengerTypes" :key="type.id">
                <div class="type-label">
                  <span>{{ $t(type.label) }}</span>
                  <span class="price">${{ type.price }}</span>
                  <span class="remaining-seats" v-if="cycleId">
                    {{ type.type === 'adult'
                      ? $t('order.remainingSeats', { n: type.max - type.count })
                      : $t('order.remainingChildSeats', { n: type.max - type.count }) }}
                  </span>
                </div>
                <el-input-number
                  v-model="type.count"
                  :min="0"
                  :max="type.max"
                  :step="1"
                  size="small"
                  :controls-position="'right'"
                  :disabled="type.type === 'child' ? childDisabled : !cycleId"
                  @change="type.type === 'adult' ? updatePassengerLimits() : updateChildLimits()"
                ></el-input-number>
              </div>
            </div>

            <!-- Date Selection -->
            <div class="date-section">
              <h3>{{ $t('order.selectDate') }} <span class="required">{{ $t('common.required') }}</span></h3>
              <el-calendar v-model="selectedDate" @change="changeDay">
                <template #dateCell="{ data }">
                  <div
                    class="calendar-cell"
                    :class="{
                      'is-selected': isSelected(data.day),
                      'is-disabled': isDateDisabled(data.day),
                      'is-full': isDateFull(data.day)
                    }"
                    @click.stop="handleDateClick(data.day)"
                  >
                    {{ data.day.split('-').slice(-1)[0] }}
                    <div v-if="isDateFull(data.day)" class="date-status">{{ $t('order.full') }}</div>
                  </div>
                </template>
              </el-calendar>
            </div>

            <!-- Time Selection -->
            <div class="time-section">
              <h3>{{ $t('order.selectTime') }} <span class="required">{{ $t('common.required') }}</span></h3>
              <div class="time-grid-container">
                <div v-if="availableTimes.length" class="time-grid">
                  <div
                    v-for="time in availableTimes"
                    :key="time.id"
                    class="time-cell"
                    :class="{
                      'booked': time.booked,
                      'selected': cycleId === time.id
                    }"
                    @click="handleTimeClick(time)"
                  >
                    <div class="time">{{ formatTime(time.start_time) }}</div>
                    <div class="seats">{{ formatCount(time.count) }}{{ $t('order.seats') }}</div>
                    <div class="status">
                      <span v-if="time.booked">{{ $t('order.booked') }}</span>
                      <span v-else-if="cycleId === time.id">{{ $t('order.selected') }}</span>
                      <span v-else>{{ $t('order.available') }}</span>
                    </div>
                  </div>
                </div>
                <div v-else class="empty-state">
                  {{ $t('order.noAvailableTime') }}
                </div>
              </div>
            </div>

            <!-- Total Price -->
            <div class="total-price" v-if="totalPrice > 0">
              <span>{{ $t('order.totalPrice') }}</span>
              <div class="price-container">
                <template v-if="$store.state.userInfo">
                  <span class="original-price">${{ totalPrice }}</span>
                  <span class="discount">-20%</span>
                  <span class="discount-price">${{ (totalPrice * 0.8).toFixed(2) }}</span>
                </template>
                <template v-else>
                  <span class="amount">${{ totalPrice }}</span>
                </template>
              </div>
            </div>

            <!-- Submit Button -->
            <el-button
              v-if="!showPassengerForm"
              type="primary"
              class="submit-btn"
              :loading="submitting"
              :disabled="!cycleId || !selectedUser"
              @click="confirmBooking"
            >
              {{ $t('order.confirmBooking') }}
            </el-button>

            <!-- Passenger Information Form -->
            <div v-if="showPassengerForm" class="passenger-form">
              <h3>{{ $t('order.contactInfo') }}</h3>
              <div class="contact-form">
                <el-form :model="contactPerson" :rules="rules" ref="contactForm">
                  <el-form-item :label="$t('order.name')" prop="name">
                    <el-input v-model="contactPerson.name"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('order.phone')" prop="phone">
                    <el-input v-model="contactPerson.phone"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('order.email')" prop="email">
                    <el-input v-model="contactPerson.email"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('order.childs_count')" prop="childs_count">
                    <el-input v-model="contactPerson.childs_count"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('order.wechat')" prop="wechat">
                    <el-input v-model="contactPerson.wechat"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('order.notes')" prop="notes">
                    <el-input type="textarea" v-model="contactPerson.notes"></el-input>
                  </el-form-item>
                </el-form>
              </div>

<!--              <h3>{{ $t('order.passengerInfo') }}</h3>-->
<!--              <div v-for="(passenger, index) in passengerForms" :key="index" class="passenger-info">-->
<!--                <div class="passenger-header">-->
<!--                  <h4>{{ $t('order.passenger') }} {{ index + 1 }} ({{ passenger.type }})</h4>-->
<!--                  <span class="required">{{ $t('common.required') }}</span>-->
<!--                </div>-->

<!--                <el-form :model="passenger" :rules="passengerRules" :ref="'passengerForm' + index">-->
<!--                  <el-form-item :label="$t('order.name')" prop="name">-->
<!--                    <el-input v-model="passenger.name"></el-input>-->
<!--                  </el-form-item>-->

<!--                  <el-form-item :label="$t('order.phone')" prop="phone">-->
<!--                    <el-input v-model="passenger.phone"></el-input>-->
<!--                  </el-form-item>-->

<!--                  <el-form-item :label="$t('order.email')" prop="email">-->
<!--                    <el-input v-model="passenger.email"></el-input>-->
<!--                  </el-form-item>-->

<!--                  <el-form-item :label="$t('order.notes')" prop="notes">-->
<!--                    <el-input type="textarea" v-model="passenger.notes"></el-input>-->
<!--                  </el-form-item>-->
<!--                </el-form>-->
<!--              </div>-->

              <!-- Payment Button -->
              <el-button
                type="primary"
                class="payment-btn"
                @click="proceedToPayment"
                :loading="submitting">
                {{ $t('order.proceedToPayment') }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Team
        :ship="product"
        :passengerForms="passengerForms"
        v-show="showPassengerForm"
        @proceedToPayment="proceedToPayment"
        @back="showPassengerForm = false"></Team>
    <foot></foot>
  </div>
</template>

<script>
import { http } from '@/api/api.js'
import dayjs from "dayjs";
import Team from "./team.vue";
export default {
  name: 'order',
  components: {
    Team
  },
  data() {
    return {
      isMobile: false,
      product: {
        imageList: []
      },
      passengerTypes: [
        {
          id: 1,
          label: 'order.adult',
          type: 'adult',
          price: 0,
          count: 0,
          min: 0,
          max: 0
        },
        {
          id: 2,
          label: 'order.child',
          type: 'child',
          price: 0,
          count: 0,
          min: 0,
          max: 0
        }
      ],
      selectedDate: dayjs().add(1, 'day').toDate(), // 默认选择次日
      cycleId: '',
      submitting: false,
      currentIndex: 0,
      availableTimes: [],
      availableTimesAll: [],
      currentTimeSlot: null,
      showPassengerForm: false,
      passengerForms: [],
      contactPerson: {
        name: '',
        phone: '',
        email: '',
        wechat: '',
        notes: '',
        childs_count: 0
      },
      rules: {
        name: [
          { required: true, message: this.$t('order.nameRequired'), trigger: 'blur' }
        ],
        phone: [
          { required: true, message: this.$t('order.phoneRequired'), trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$t('order.emailRequired'), trigger: 'blur' },
          // { type: 'email', message: this.$t('order.emailInvalid'), trigger: 'blur' }
        ],
        childs_count: [
          { required: true, message: this.$t('order.childs_countRequired'), trigger: 'blur' }
        ]
      },
      dateMap: {}, // 存储日期状态 map
    }
  },
  computed: {
    totalPrice() {
      return this.passengerTypes.reduce((sum, type) => {
        return sum + (type.price * type.count)
      }, 0).toFixed(2)
    },
    totalPassengers() {
      const adultCount = this.passengerTypes.find(t => t.type === 'adult')?.count || 0;
      const childCount = this.passengerTypes.find(t => t.type === 'child')?.count || 0;
      return adultCount + (childCount / 2); // 儿童占半个座位
    },
    remainingSeats() {
      if (!this.cycleId) return 0;
      const selectedTime = this.availableTimes.find(t => t.id === this.cycleId);
      if (!selectedTime) return 0;
      const adultCount = this.passengerTypes.find(t => t.type === 'adult')?.count || 0;
      if (adultCount === 0) return 0;
      return selectedTime.count - adultCount;
    },
    selectedUser() {
      // 总人数大于1时，必须至少有1名成人
      const adultCount = this.passengerTypes.find(t => t.type === 'adult')?.count || 0;
      return adultCount > 0
    },
    adultCount() {
      return this.passengerTypes.find(t => t.type === 'adult')?.count || 0;
    },
    childDisabled() {
      return !this.cycleId || this.adultCount <= 0;
    },
    formatCount() {
      return (count) => {
        // 如果是整数或.0结尾，显示整数部分
        if (count % 1 === 0 || count.toString().endsWith('.0')) {
          return parseInt(count);
        }
        // 其他小数情况保持原样
        return count;
      }
    }
  },
  watch: {
    selectedDate: {
      handler(val, oldVal) {
        if (dayjs(val).format('YYYY-MM-DD') !== dayjs(oldVal).format('YYYY-MM-DD')) {
          this.cycleId = '';
          this.currentTimeSlot = null;
          // 重置人数
          this.resetPassengerCounts();
          this.changeDay(val)
          this.resetPassengerForm()
        }
      },
      immediate: true
    },
    cycleId: {
      handler(newId) {
        if (newId) {
          this.currentTimeSlot = this.availableTimes.find(item => item.id === newId)
          if (this.currentTimeSlot) {
            // 切换时间时重置人数
            this.resetPassengerCounts();
            this.updatePassengerLimits();
          }
        } else {
          // 重置所有乘客数量和最大值为0
          this.resetPassengerCounts();
        }
      },
      immediate: true
    },
    'passengerTypes.0.count': {
      handler() {
        this.updatePassengerLimits();
      }
    },
    'passengerTypes.1.count': {
      handler() {
        this.updatePassengerLimits();
      }
    },
    adultCount: {
      handler(newCount) {
        if (newCount <= 0) {
          const childType = this.passengerTypes.find(t => t.type === 'child');
          if (childType) {
            childType.count = 0;
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    updatePassengerLimits() {
      if (!this.cycleId || !this.currentTimeSlot) return;

      const adultType = this.passengerTypes.find(t => t.type === 'adult');
      const childType = this.passengerTypes.find(t => t.type === 'child');

      if (!adultType || !childType) return;

      const totalSeats = this.currentTimeSlot.count;
      const childCount = childType.count || 0;
      const adultCount = adultType.count || 0;

      // 计算当前占用的座位数（儿童占半个座位）
      const occupiedSeats = adultCount + (childCount / 2);

      // 更新成人可选最大值
      const remainingSeats = totalSeats - (childCount / 2);
      adultType.max = Math.floor(remainingSeats);

      // 如果总人数大于1且没有成人，强制至少选择1个成人
      // if (this.totalPassengers > 1 && adultCount === 0) {
      //   adultType.count = 1;
      //   this.updateChildLimits();
      //   // return;
      // }

      // // 如果成人数超过新的最大值，调整成人数
      // if (adultType.count > adultType.max) {
      //   adultType.count = adultType.max;
      // }

      if (adultType.count <= 0) {
        childType.count = 0
      }
      this.updateChildLimits();

      console.log(this.passengerTypes)
    },
    updateChildLimits() {
      if (!this.cycleId || !this.currentTimeSlot) return;

      const adultType = this.passengerTypes.find(t => t.type === 'adult');
      const childType = this.passengerTypes.find(t => t.type === 'child');

      if (!adultType || !childType) return;

      const totalSeats = this.currentTimeSlot.count;
      const remainingSeats = totalSeats - adultType.count;

      // 儿童最大值为剩余座位数的2倍（因为占半个座位）
      childType.max = Math.floor(remainingSeats * 2);

      // // 如果儿童数超过新的最大值，调整儿童数
      // if (childType.count > childType.max) {
      //   childType.count = childType.max;
      // }
    },
    resetPassengerCounts() {
      // 重置所有乘客数量和最大值为0
      this.passengerTypes.forEach(type => {
        type.count = 0;
        type.max = 0;
      });
    },
    resetPassengerForm() {
      this.showPassengerForm = false
      this.passengerForms = []
      this.contactPerson = {
        name: '',
        phone: '',
        email: '',
        wechat: '',
        notes: '',
        childs_count: 0
      }
    },

    updatePassengerForms() {
      // Create a new array to store updated passenger forms
      const newPassengerForms = []
      let totalIndex = 0

      // Iterate through passenger types
      this.passengerTypes.forEach(type => {
        for (let i = 0; i < type.count; i++) {
          // Find existing passenger form for this type and index
          const existingForm = this.passengerForms.find(form =>
            form.type === type.label &&
            form.typeIndex === i
          )

          if (existingForm) {
            // Keep existing data if form already exists
            newPassengerForms.push({
              ...existingForm,
              formIndex: totalIndex // Update form index for ref
            })
          } else {
            // Create new form if doesn't exist
            newPassengerForms.push({
              type: type.label,
              typeIndex: i,
              formIndex: totalIndex,
              nickname: '',
              phone: '',
              email: '',
              notes: ''
            })
          }
          totalIndex++
        }
      })

      // Update forms array
      this.passengerForms = newPassengerForms

      // Force re-render of forms
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },

    confirmBooking() {
      // 判断当前班次已发车人数是否满足4人团
      let count = 0
      this.passengerTypes.forEach(type => {
        if (type.type === 'adult') {
          count += type.count
        } else {
          // 儿童占用半个座位
          count += type.count * 0.5
        }
      })
      let find = this.availableTimes.find(item => item.id === this.cycleId)
      console.log('find',find)
      if (find) {
        find.orderList.forEach(item => {
          count+=(item.count || 0)
          count+=((item.child_count || 0) * 0.5)
        })
      }
      console.log('count',count, this.product)
      if (count < this.product.min_count) {
        // 对话框确认
        this.$confirm(`${this.$t('order.minCountWarning', { n: this.formatCount(this.product.min_count) })}`, this.$t('order.warning'), {
          confirmButtonText: this.$t('order.confirm'),
          cancelButtonText: this.$t('order.cancel'),
          type: 'warning',
          callback: (action) => {
            if (action === 'confirm') {
              // Initialize passenger forms
              this.updatePassengerForms()
              this.showPassengerForm = true
            }
          }
        })
      } else {
        // Initialize passenger forms
        this.updatePassengerForms()
        this.showPassengerForm = true
      }
    },

    changeDate(dateId) {
      let find = this.availableTimes.find(item => item.id === dateId)
      this.passengerTypes.forEach(item => {
        if (item.type === 'adult') {
          item.price = find.price
          item.max = find.count
        } else {
          item.price = find.child_price
          item.max = find.count * 2
        }
      })
      this.resetPassengerForm()
    },
    async changeDay(date) {
      if (typeof date === 'string') {
        this.selectedDate = new Date(date)
      }
      // 避免重复请求
      const dateStr = dayjs(this.selectedDate).format('YYYY-MM-DD')
      if (this.lastRequestedDate === dateStr) return
      this.lastRequestedDate = dateStr
      // 清空周期id
      this.cycleId = ''
      this.getAvailableTimes(dateStr)
    },
    async getAvailableTimes(date) {
      this.availableTimes = this.availableTimesAll.filter(item => item.count > 0).filter(item => dayjs(item.start_time).format('YYYY-MM-DD') === dayjs(date).format('YYYY-MM-DD'))
      console.log('this.availableTimes',this.availableTimes)
    },
    checkDevice() {
      this.isMobile = window.innerWidth <= 750
    },
    isSelected(day) {
      if (!this.selectedDate) return false
      return dayjs(day).format('YYYY-MM-DD') === dayjs(this.selectedDate).format('YYYY-MM-DD')
    },
    isDateDisabled(day) {
      const today = dayjs().startOf('day')
      const date = dayjs(day)
      // 过去的日期禁用
      if (date.isBefore(today)) {
        return true
      }
      // 如果日期不在 map 中则禁用
      const formattedDate = dayjs(day).format('YYYY-MM-DD')
      return !(formattedDate in this.dateMap)
    },
    isDateFull(day) {
      const formattedDate = dayjs(day).format('YYYY-MM-DD')
      // 如果日期在 map 中且值为 false，表示约满
      return formattedDate in this.dateMap && !this.dateMap[formattedDate]
    },
    handleDateClick(day) {
      if (this.isDateDisabled(day)) return
      this.selectedDate = new Date(day)
      this.changeDay(day)
    },

    handleTimeClick(time) {
      if (time.booked) return
      this.cycleId = time.id
      this.changeDate(time.id)
    },
    formatTime(timeStr) {
      return dayjs(timeStr).format('HH:mm')
    },
    async proceedToPayment({ contactPerson }) {
      this.contactPerson = {
        ...contactPerson
      }
      // Validate contact form first
      // try {
      //   await this.$refs.contactForm.validate()
      // } catch (error) {
      //   return
      // }

      // Validate all passenger forms
      // for (let i = 0; i < this.passengerForms.length; i++) {
      //   try {
      //     await this.$refs[`passengerForm${i}`][0].validate()
      //   } catch (error) {
      //     return
      //   }
      // }

      this.submitting = true
      try {
        let count = 0
        let adult_count = 0
        let child_count = 0
        let userList = []
        this.passengerTypes.forEach((item,index) => {
          if (item.type === 'adult') {
            for (let i = 0; i < item.count; i++) {
              userList.push({
                ...item,
                is_adult: 1,
                ...(this.passengerForms[index] || {})
              })
              adult_count++
              count++
            }
          } else {
            for (let i = 0; i < item.count; i++) {
              userList.push({
                ...item,
                is_adult: 0,
                ...(this.passengerForms[index] || {})
              })
              child_count++
              count+=0.5
            }
          }
        })
        const orderData = {
          ship_id: this.$route.query.id,
          cycle_id: this.cycleId,
          contact_name: this.contactPerson.name,
          contact_phone: this.contactPerson.phone,
          contact_email: this.contactPerson.email,
          contact_wx: this.contactPerson.wechat,
          contact_remark: this.contactPerson.notes,
          ...this.contactPerson,
          totalPrice: this.totalPrice,
          amount: this.$store.state.userInfo ? this.totalPrice * 0.8 : this.totalPrice,
          discount_amount: this.$store.state.userInfo ? this.totalPrice * 0.2 : 0,
          userList: userList,
          adult_count,
          child_count,
          count,
        }
        const response = await http.order.create('', {
          ...orderData,
          user_id: this.$store.state.userInfo ? this.$store.state.userInfo.id : 0,
          role: this.$store.state.userInfo ? 2 : 1
        })
        this.$router.push({
          path: '/payment',
          query: { orderId: response.data.id }
        })
      } catch (error) {
        this.submitting = false
      } finally {
        this.submitting = false
      }
    },
  },
  async created() {
    try {
      const { data: product } = await http.ship.read(this.$route.query.id)
      this.product = {
        ...product,
        imageList: (product.images || '').split(',')
      }
      // 根据产品价格设置乘客类型
      if (product.price) {
        this.passengerTypes[0].price = product.price
        this.passengerTypes[0].max = product.count
      }

      if (product.child_price) {
        this.passengerTypes[1].price = product.child_price
        this.passengerTypes[1].max = product.count
      }

      const formattedDate = dayjs(this.selectedDate).format('YYYY-MM-DD')
      const { data } = await http.shipCycle.list({
        ship_id: this.$route.query.id,
        afterDate: formattedDate
      })
      this.availableTimesAll = data
      let dateMap = {}
      // 更新日期状态
      this.availableTimesAll.forEach(item => {
        dateMap[dayjs(item.start_time).format('YYYY-MM-DD')] = item.count > 0;
      })
      this.dateMap = dateMap
      await this.changeDay(this.selectedDate)

    } catch (error) {
      console.error('Error fetching product:', error)
      this.$message.error(this.$t('order.getProductError'))
    }
  },
  mounted() {
    this.checkDevice()
    window.addEventListener('resize', this.checkDevice)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkDevice)
  }
}
</script>

<style lang="scss" scoped>
.content {
  .main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;

    @media screen and (max-width: 750px) {
      padding: 10px;
    }
  }
}

.order-container {
  display: flex;
  gap: 30px;
  @media screen and (max-width: 750px) {
    flex-direction: column;
    gap: 20px;
  }
}

.product-section {
  flex: 1;

  .product-title {
    font-size: 24px;
    margin-bottom: 20px;

    @media screen and (max-width: 750px) {
      font-size: 20px;
      margin-bottom: 15px;
    }
  }

  .product-gallery {
    margin-bottom: 20px;

    .carousel-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .thumbnail-row {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      overflow-x: auto;
      padding-bottom: 5px;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 2px;
      }

      .thumbnail {
        flex-shrink: 0;
        width: 80px;
        height: 60px;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.3s;

        &:hover {
          opacity: 1;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .product-info {
    .price {
      font-size: 20px;
      color: #333;
      margin-bottom: 15px;

      @media screen and (max-width: 750px) {
        font-size: 18px;
        margin-bottom: 10px;
      }
    }

    .details {
      .detail-item {
        margin-bottom: 10px;

        .label {
          color: #666;
          margin-right: 10px;
        }
      }
    }
  }
}
.el-calendar__header {
  padding: 12px 0 !important;
}
.booking-section {
  width: 100%;
  max-width: 440px;

  @media screen and (max-width: 750px) {
    max-width: none;
  }

  .booking-form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    @media screen and (max-width: 750px) {
      padding: 15px;
      border-radius: 0;
      box-shadow: none;
      background: #f8f8f8;
    }

    .form-title {
      font-size: 20px;
      margin-bottom: 20px;
      text-align: center;

      @media screen and (max-width: 750px) {
        font-size: 18px;
        margin-bottom: 15px;
      }
    }

    .required {
      color: #ff4949;
    }

    h3 {
      margin-bottom: 15px;
      font-size: 16px;
    }
  }

  .passenger-section {
    margin-bottom: 20px;

    .passenger-type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      .type-label {
        display: flex;
        flex-direction: column;

        span {
          &:first-child {
            font-size: 16px;
            margin-bottom: 5px;
          }

          &.price {
            color: #0F7CD0;
            font-weight: bold;
            margin-bottom: 5px;
          }

          &.remaining-seats {
            color: #666;
            font-size: 13px;
          }
        }
      }

      .el-input-number {
        width: 120px;

       .el-input__inner {
          text-align: center;
        }
      }
    }
  }

  .date-section {
    margin-bottom: 20px;

    :deep(.el-calendar) {
      --el-calendar-selected-bg-color: #0F7CD0;
      --el-calendar-selected-color: #fff;

      .el-calendar__body {
        padding: 8px;

        .el-calendar-day {
          padding: 0;
          height: 36px;
        }

        td {
          border: none;
        }
      }

      .el-calendar-table {
        tr {
          td {
            &:first-child {
              border-left: none;
            }
            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }

    .calendar-cell {
      position: relative;
      height: 36px;
      padding: 2px;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;

      &.is-selected {
        color: #ffffff;
        background-color: #1890ff;
      }

      &.is-disabled {
        color: #ccc;
        cursor: not-allowed;
        background-color: #f5f5f5;
      }

      &.is-full {
        cursor: not-allowed;
        background-color: #fff1f0;

        .date-status {
          font-size: 12px;
          color: #f5222d;
          margin-top: 2px;
        }
      }
    }
  }

  .time-section {
    margin-bottom: 20px;

    .time-grid-container {
      margin-top: 15px;
    }

    .time-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;

      @media screen and (max-width: 750px) {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .time-cell {
      background-color: #f8f8f8;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.3s ease;

      &.booked {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;

        .status, .seats {
          color: #999;
        }
      }

      &.selected {
        background-color: #0F7CD0;
        color: #fff;

        .status, .seats {
          color: #fff;
        }
      }

      .time {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 4px;
      }

      .seats {
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
      }

      .status {
        font-size: 12px;
        color: #666;
      }

      &:hover:not(.booked) {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }

    .empty-state {
      text-align: center;
      padding: 20px;
      background-color: #f8f8f8;
      border-radius: 8px;
      color: #666;
    }
  }

  .total-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;

    .price-container {
      display: flex;
      align-items: center;
      gap: 5px;

      .original-price {
        text-decoration: line-through;
        color: #999;
        font-size: 14px;
      }

      .discount {
        color: #ff4949;
        font-size: 12px;
        background: rgba(255,73,73,0.1);
        padding: 2px 4px;
        border-radius: 2px;
      }

      .discount-price {
        color: #ff4949;
        font-weight: bold;
        font-size: 20px;
      }

      .amount {
        font-size: 20px;
        color: #0F7CD0;
        font-weight: bold;
      }
    }
  }

  .submit-btn {
    width: 100%;
    height: 44px;
    background-color: #0F7CD0;
    border: none;
    color: #fff;
    font-size: 16px;

    &:hover {
      background-color: darken(#0F7CD0, 5%);
    }
    &:not(:disabled):hover {
      background-color: #1989fa;
      border-color: #1989fa;
    }

    &:disabled {
      background-color: #a0cfff;
      border-color: #a0cfff;
      cursor: not-allowed;
    }
  }

  .passenger-form {
    margin-top: 30px;

    h3 {
      font-size: 18px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;

      &:not(:first-child) {
        margin-top: 40px;
      }
    }

    .contact-form {
      background: #f8f8f8;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;

      :deep(.el-form-item) {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .el-form-item__label {
          color: #666;
        }

        .el-input__inner {
          border-color: #dcdfe6;
        }
      }
    }

    .passenger-info {
      margin-bottom: 30px;
      padding: 20px;
      background: #f8f8f8;
      border-radius: 8px;

      .passenger-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h4 {
          font-size: 16px;
          color: #333;
        }

        .required {
          font-size: 12px;
          color: #f56c6c;
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 20px;

        .el-form-item__label {
          color: #666;
        }

        .el-input__inner {
          border-color: #dcdfe6;
        }
      }
    }

    .payment-btn {
      width: 100%;
      height: 44px;
      margin-top: 20px;
      background-color: #0F7CD0;
      border-color: #0F7CD0;

      &:hover {
        background-color: darken(#0F7CD0, 5%);
        border-color: darken(#0F7CD0, 5%);
      }
    }
  }

  .is-mobile {
    .contact-form {
      padding: 15px;
    }
    .passenger-info {
      padding: 15px;
    }
  }
}
</style>

<style>
.el-calendar-table .el-calendar-day {
  padding: 0 !important;
}
.el-calendar__body {
  padding: 0 !important;
}
</style>
